<template>
  <div>
    <div class="yinq" v-show="isShow">
      <ul class="lu">
        <li class="li1">
          请选择提现方式
        </li>
        <li class="li2">
          <div class="weixin weixin1">
            <img class="img12" @click="" src="../../assets/个人中心/1个人中心/qiu.png"/>
            <p class="pp">提现到微信</p>
            <span class="sp">（提现到微信，手续费率为0.29，额外扣除10%服务费
2-3个工作日到账。）</span>
          </div>
          <div  class="zhifubao weixin">
            <img @click="" class="img12" src="../../assets/个人中心/1个人中心/yuan.png"/>
            <p class="pp">提现到支付宝</p>
            <span class="sp">（提现到支付宝，手续费率为0.36，额外扣除10%服务费
4-6个工作日到账。）</span>
          </div>
          <router-link to="/person">
            <nav class="NAV" >
              提现
            </nav>
          </router-link>
          <nav @click="doTrue" class="nav NAV">
            取消
          </nav>
        </li>
      </ul>
    </div>
    <div class="wra">
      <div class="tou">
        <img class="img1" src="../../assets/个人中心/1个人中心/jiantou.png" @click="doTun"/>
        <p class="p4">我的账户</p>
      </div>
      <div class="cont1212">
        <img class="cont_img" src="../../assets/个人中心/1个人中心/zuanshi.png"/>
      </div>
      <p class="p3">￥2000</p>
      <span class="sss">我的金额</span>
        <div class="bottom12" @click="doXian">
          提现
        </div>
    </div>
  </div>
</template>

<script>
  export  default {
    data(){
      return{
        isShow : false
      }
    },
    methods: {
      doXian(){
        this.isShow = true
      },
      doTrue(){
        this.isShow = false;
      },
      doTun(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .wra{
    width: 100%;
  }
  .yinq{
    display: block;
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
  }
  .yinq .lu{
    width: 100%;
    height: 18.888rem;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .yinq .lu .li1{
    width: 100%;
    height: 2.222rem;
    display: flex;
    justify-content: center;
    background: #E53E42;
    align-items: center;
    font-size: 0.833rem;
    color: white;
  }
  .yinq .lu .li2{
    width: 100%;
    height: 16.666rem;
    background: white;
  }
  .li2 .weixin,.li2 .zhifubao{
    width: 80%;
    height: 5.083rem;
    position: relative;
  }
  .li2 .weixin .img12{
    position: absolute;
    left: 0.555rem;
    top: 1.2rem;
    width: 0.833rem;
    height: 0.833rem;
  }
  .li2 .weixin .pp{
    position: absolute;
    top: 1.03rem;
    left: 2.083rem;
    height: 0.805rem;
    font-size: 0.8rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .li2 .weixin .sp{
    position: absolute;
    top: 2.111rem;
    left: 2.083rem;
    width: 100%;
    height: 1.694rem;
    font-size: 0.52rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .li2 .NAV .a{
    color: white;
  }
  .li2 .NAV{
    width: 13.333rem;
    height: 2rem;
    background-color: #61a7ea;
    border-radius: 0.055rem;
    margin: 2px auto 0;
    text-align: center;
    font-size: 0.777rem;
    line-height: 2rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .li2 .nav{
    background: white;
    color: black;
    box-sizing: border-box;
  }
  .tou{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tou .img1{
    width: 0.638rem;
    height: 1.055rem;
    position: absolute;
    left: 0.555rem;
  }

  .cont1212{
    width: 5.666rem;
    height: 4.222rem;
    margin: 1.388rem auto 0;
  }
  .cont1212 .cont_img{
    width: 100%;
    height: 100%;
  }
  .wra .p3{
    margin: 1.527rem auto 0;
    width: 2.666rem;
    height: 0.638rem;
    font-size: 0.833rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #e53e42;
  }
  .wra .sss{
    margin-top: 0.694rem;
    display: block;
    margin-left: 43%;
    width: 3.416rem;
    height: 0.805rem;
    font-size: 0.833rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .bottom12{
    width: 13.333rem;
    height: 2rem;
    background-color: #61a7ea;
    border-radius: 0.055rem;
    margin: 2.222rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.777rem;
    line-height: 1rem;
  }
  .wra .tou .p4{
    position: absolute;
    bottom: 0.972rem;
    height: 0.972rem;
    font-family: MicrosoftYaHei;
    font-size: 1rem;
    letter-spacing: 0px;
    color: #ffffff;
  }
</style>
